<template>
  <div class="employee">
    <!-- 卡1 -->
    <el-card class="top-card">
      <!-- layout -->
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <div class="info-box">
            <!-- 图标 -->
            <i class="el-icon-info" />
            <span>共{{ total }}条数据</span>
          </div>
        </el-col>
        <el-col :span="6">
          <el-button
            type="warning"
            @click="$router.push('/import')"
          >导入</el-button>
          <el-button type="danger" @click="exportExcel">导出</el-button>
          <el-button type="primary" @click="showDialog">新增员工</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 卡2 -->
    <el-card class="bottom-card">
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <!-- 渲染table -->
        <el-table-column fixed type="index" label="序号" width="50" />
        <el-table-column prop="username" label="姓名" width="250" />
        <el-table-column prop="mobile" label="手机号" width="250" />
        <el-table-column prop="workNumber" label="工号" width="250" />
        <!-- 自定义聘用形式数据的渲染方式 这里用其他方式也可以实现，如作用域插槽,-->
        <el-table-column
          prop="formOfEmployment"
          label="聘用形式"
          width="250"
          :formatter="formatEmp"
        />
        <el-table-column prop="departmentName" label="部门" width="120" />
        <el-table-column prop="formOfEmployment" label="入职时间" width="250">
          <!-- 作用域插槽，自定义数据的渲染方式 -->
          <template #default="{ row }">
            <span>{{ row.timeOfEntry | formatDate }}</span>
          </template>
        </el-table-column>
        <!-- 本地接口没有这个字段 -->
        <el-table-column label="账户状态" width="250" />
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="handleClick(row)"
            >查看</el-button>
            <el-button
              type="text"
              size="small"
              @click="showRole(row)"
            >角色</el-button>
            <el-button
              type="text"
              size="small"
              @click="remove(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- 这里给个需求：限制:**不能使用`@current-change`来完成 -->
      <el-pagination
        layout="prev, pager, next"
        :current-page.sync="page"
        :page-size.sync="size"
        :total="total"
      />
    </el-card>
    <!-- 弹框 -->
    <EmDialogVue ref="dialog" />
    <!-- 权限管理弹框 -->
    <RoleDialogVue ref="roleDialog" />
  </div>
</template>

<script>
import { getEmployees, delEmployeeById } from '@/api/employees'

// 导入枚举
import EMPLOYEECON from '@/api/constant/employees'
// 导入弹框组件
import EmDialogVue from './components/EmDialog.vue'
import RoleDialogVue from './components/RoleDialog.vue'
export default {
  name: 'Employees',
  components: { EmDialogVue, RoleDialogVue },
  data() {
    return {
      page: 1, // 页码
      size: 3, // 每页条数
      total: 0, // 总条数
      tableData: [] // table数据
    }
  },
  // 监听页码改变时刷新数据
  watch: {
    page() {
      // 这里有两个形参可以拿到上一页和这一页，也可用this表本页
      // console.log(this.page)
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 显示弹框
    showDialog() {
      // console.log(this.$refs)
      this.$refs.dialog.dialogFormVisible = true
    },

    // 显示权限弹框并把点击行的id传过去
    showRole(row) {
      this.$refs.roleDialog.getDataAndShow(row.id)
    },

    // 删除员工
    remove(row) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '删除员工', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (this.tableData.length === 1 && this.page !== 1) {
          this.page--
        }
        await delEmployeeById(row.id)
        this.getData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },

    // 获取员工列表
    async getData() {
      const res = await getEmployees({ page: this.page, size: this.size })
      // console.log(res)
      this.tableData = res.rows
      this.total = res.total
    },
    // 自定义聘用信息的渲染方式
    // 1. row`:这一行的数据(`基本上只用它`)
    // 2. `col`:这一行的组件设置(`用的不多`)
    formatEmp(row, column) {
      // filter返回的是数组 尽管只有一个值
      const res = EMPLOYEECON.hireType.filter((v) => {
        if (v.id === +row.formOfEmployment) {
          return true
        }
      })
      // 后面导入的时候没有部门，所以可能匹配不到，得到空数组
      return res.length > 0 ? res[0].value : ' '
    },
    handleClick(row) {
      // console.log(row)
      this.$router.push({ name: 'detail', params: { id: row.id }})
    },
    // 导出
    async exportExcel() {
      const res = await getEmployees({ page: 1, size: 10000 })
      // console.log(res)
      // 把中文Headers从枚举中提取出来
      const headers = Object.keys(EMPLOYEECON.excelMap)
      // console.log(headers)
      // 把列表中的数据变成二位数组
      const data = res.rows.map((v) => {
        const arr = []
        headers.forEach((vc) => {
          // 转成英文key
          const enKey = EMPLOYEECON.excelMap[vc]
          // 通过英文key拿到列表中的具体数据
          const value = v[enKey]
          arr.push(value)
        })
        return arr
      })
      // console.log(data)

      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header: headers, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    }
  }
}
</script>

<style lang="scss">
.employee {
  .bottom-card {
    margin-top: 20px;
  }
  .el-pagination {
    text-align: center;
    margin-top: 20px;
  }
  .el-row {
    align-items: center;
  }
  .info-box {
    border: 1px solid #96d7ff;
    background-color: #e6f7ff;
    border-radius: 4px;
    display: inline-block;
    padding: 4px;
    i {
      color: #5181fb;
    }
  }
}
</style>
